import React, { useState, useEffect, useLayoutEffect } from 'react'
import { Carousel, Flex, Grid, WingBlank } from 'antd-mobile'
import { Link } from 'react-router-dom'
import styles from './index.module.scss'
import SearchBar from '../../components/SearchBar'

// 导入图片
import image1 from '../../assets/images/nav-1.png'
import image2 from '../../assets/images/nav-2.png'
import image3 from '../../assets/images/nav-3.png'
import image4 from '../../assets/images/nav-4.png'

// 数据接口
import { getSwiper, getGroups, getNews } from '../../api/home'

import { getCurrentCity } from '@/utils/city'

function Home() {
  // 轮播图
  const [swiper, setSwiper] = useState(null)
  // 轮播图图片的高度
  const [imgHeight, setImageHeight] = useState(212)
  // 导航
  const [navs] = useState([
    { icon: image1, text: '整租', path: '/layout/houselist' },
    { icon: image2, text: '合租', path: '/layout/houselist' },
    { icon: image3, text: '地图找房', path: '/map' },
    { icon: image4, text: '去出租', path: '/rent/add' },
  ])
  // 租房小组
  const [groups, setGroups] = useState(null)
  // 资讯
  const [news, setNews] = useState(null)
  // 城市名
  const [cityName, setCityName] = useState('深圳')

  const getSwiperData = async () => {
    const res = await getSwiper()

    setSwiper(res.data.body)
  }

  const getGroupData = async () => {
    const res = await getGroups()

    setGroups(res.data.body)
  }

  const getNewsData = async () => {
    const res = await getNews()

    setNews(res.data.body)
  }

  useEffect(() => {
    getCurrentCity().then(({ label }) => {
      setCityName(label)
    })
  }, [])

  useLayoutEffect(() => {
    getSwiperData()
    getGroupData()
    getNewsData()
  }, [])

  // 渲染轮播图
  const renderSwiper = () => {
    return (
      <Carousel autoplay infinite>
        {swiper.map((item) => (
          <a
            key={item.id}
            href="http://www.alipay.com"
            style={{
              display: 'inline-block',
              width: '100%',
              height: imgHeight,
            }}
          >
            <img
              src={`${process.env.REACT_APP_BASEURL}${item.imgSrc}`}
              alt=""
              style={{ width: '100%', verticalAlign: 'top' }}
              onLoad={() => {
                // fire window resize event to change height
                window.dispatchEvent(new Event('resize'))
                setImageHeight('auto')
              }}
            />
          </a>
        ))}
      </Carousel>
    )
  }

  // 渲染Nav
  const renderNav = () => {
    return (
      <Flex className={styles.nav}>
        {navs.map((item) => {
          return (
            <Flex.Item key={item.text}>
              <Link to={item.path}>
                <img src={item.icon} alt="" />
                <p>{item.text}</p>
              </Link>
            </Flex.Item>
          )
        })}
      </Flex>
    )
  }

  // 渲染租房小组
  const renderGroups = () => {
    return (
      <div className={styles.groups}>
        <Flex justify="between">
          <Flex.Item style={{ fontSize: 18, fontWeight: 'bold' }}>
            租房小组
          </Flex.Item>
          <Flex.Item align="end">更多</Flex.Item>
        </Flex>
        <Grid
          data={groups}
          columnNum={2}
          hasLine={false}
          square={false}
          renderItem={(dataItem) => (
            <div className={styles.navItem}>
              <div className={styles.left}>
                <p>{dataItem.title}</p>
                <p>{dataItem.desc}</p>
              </div>
              <div className={styles.right}>
                <img
                  src={`${process.env.REACT_APP_BASEURL}${dataItem.imgSrc}`}
                  alt=""
                />
              </div>
            </div>
          )}
        />
      </div>
    )
  }

  // 渲染最新资讯
  const renderNews = () => {
    return (
      <div className={styles.news}>
        <h3 className={styles.groupTitle}>最新资讯</h3>
        <WingBlank size="md">
          {news.map((item) => {
            return (
              <div key={item.id} className={styles.newsItem}>
                <div className={styles.imgWrap}>
                  <img
                    className={styles.img}
                    src={`${process.env.REACT_APP_BASEURL}${item.imgSrc}`}
                    alt=""
                  />
                </div>
                <Flex
                  justify="between"
                  direction="column"
                  className={styles.content}
                >
                  <h3 className={styles.title}>{item.title}</h3>
                  <Flex justify="between" className={styles.info}>
                    <span>{item.from}</span>
                    <span>{item.date}</span>
                  </Flex>
                </Flex>
              </div>
            )
          })}
        </WingBlank>
      </div>
    )
  }

  return (
    <div className={styles.root}>
      <SearchBar cityName={cityName} />
      {/* 渲染轮播图 */}
      {swiper && renderSwiper()}
      {/* 渲染Nav */}
      {renderNav()}
      {/* 渲染租房小组 */}
      {groups && renderGroups()}
      {/* 渲染最新资讯 */}
      {news && renderNews()}
    </div>
  )
}

export default Home
